<template>
  <div class="settings-wrapper">
    <!-- 设置页面标题 -->

    <header class="settings-header">
      <h2>设置</h2>
    </header>
    <!-- 返回按钮 -->
    <div class="back-button" @click="goBack">
      <i class="fa fa-arrow-left"></i>
      <!-- 使用 Font Awesome 图标 -->
    </div>
    <!-- 设置项列表 -->
    <div class="settings-list">
      <!-- 个人信息 -->
      <div class="settings-item" @click="goToProfile">
        <span>个人信息</span>
        <i class="fa fa-chevron-right"></i>
      </div>

      <!-- 收货地址 -->
      <div class="settings-item" @click="goToAddress">
        <span>收货地址</span>
        <i class="fa fa-chevron-right"></i>
      </div>

      <!-- 修改密码 -->
      <div class="settings-item" @click="goToChangePassword">
        <span>修改密码</span>
        <i class="fa fa-chevron-right"></i>
      </div>

      <!-- 支付设置 -->
      <div class="settings-item" @click="goToPaySelect">
        <span>支付设置</span>
        <i class="fa fa-chevron-right"></i>
      </div>

      <!-- 切换账号 -->
      <div class="settings-item" @click="goToSwitchAccount">
        <span>切换账号</span>
        <i class="fa fa-chevron-right"></i>
      </div>

      <!-- 退出登录 -->
      <div class="settings-item logout" @click="logout">
        <span>退出登录</span>
        <i class="fa fa-sign-out"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1); 
    },
    // 跳转到个人信息页面
    goToProfile() {
      this.$router.push("/profile");
    },
    // 跳转到收货地址页面
    goToAddress() {
      this.$router.push("/userAddress");
    },
    // 跳转到修改密码页面
    goToChangePassword() {
      this.$router.push("/changePassword");
    },
    // 跳转到支付设置页面
    goToPaySelect() {
      this.$router.push("/paySelect");
    },
    // 跳转到切换账号页面
    goToSwitchAccount() {
      this.$router.push("/login");
    },
    // 退出登录
    logout() {
      sessionStorage.removeItem("user");
      this.$router.push("/login");
    }
  }
};
</script>

<style scoped>
/* 设置页面整体布局 */
.settings-wrapper {
  width: 100%;
  height: 100%;
}

/* 设置页面标题 */
.settings-header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 3.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* 设置项列表 */
.settings-list {
  margin-top: 16vw; /* 留出空间避开header */
}

/* 每个设置项 */
.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4vw;
  font-size: 4.5vw;
  background-color: #fff;
  border-bottom: 1px solid #f1f1f1;
  cursor: pointer;
}

.settings-item:hover {
  background-color: #f8f8f8;
}

/* 退出登录项特殊样式 */
.logout {
  color: #ff4d4f;
}

.logout:hover {
  background-color: #ffe6e6;
}

.settings-item i {
  font-size: 4vw;
  color: #999;
}

.back-button {
  position: fixed;
  top: 5vw; /* 根据需要调整高度 */
  left: 4vw; /* 给左边留出一定间距 */
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #ffffff;
  font-size: 4vw;
  z-index: 1000;
}

</style>
